<template>
  <div class="container">
    <van-nav-bar title="种草分享" />

    <van-pull-refresh v-model="refreshing" @refresh="OnRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="OnLoad"
      >
        <div class="box">
          <div class="item" v-for="(item, index) in list" :key="item.id">
            <div class="top">
              <div class="avatar">
                <div class="image">
                  <img :src="business.avatar_cdn" />
                </div>
                <div class="name">{{ business.nickname }}</div>
              </div>
            </div>

            <div class="title">
              {{ item.orderProduct.comment }}
            </div>

            <div class="thumbs">
              <div
                class="image"
                v-for="(img, index) in item.orderProduct.thumbs_text"
                :key="index"
                @click="preview(item.orderProduct.thumbs_text, index)"
              >
                <van-image width="100" height="100" fit="cover" :src="img" />
              </div>
            </div>

            <div class="product" @click="ToProduct(item.product.id)">
              <div class="left">
                <van-image
                  :src="item.product.thumb_text"
                  width="100%"
                  height="60"
                  fit="cover"
                />
              </div>
              <div class="right">
                <div class="name">
                  {{ item.product.name }}
                </div>
                <div class="price">￥{{ item.product.price }}</div>
              </div>
            </div>

            <div class="action">
              <div class="left">{{ item.createtime_date }}</div>
              <div class="right">
                <div class="item" @click="like(item.id, item.busid, index)">
                  <!-- 已点赞 -->
                  <van-icon name="like" color="red" v-if="item.likes_status" />
                  <!-- 未点赞 -->
                  <van-icon name="like-o" v-else />
                  <!-- 点赞数量 -->
                  <span>{{ item.likes ? item.likes_count : 0 }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { showImagePreview } from "vant";
// this代理
const { proxy } = getCurrentInstance();
// 用户数据
const business = proxy.$business;
// 我的种草数据
const list = ref([]);
// 刷新状态
const refreshing = ref(false);
// 懒加载状态
const loading = ref(false);
// 加载状态
const finished = ref(false);
// 当前页
const page = ref(1);

// 挂载前
onBeforeMount(() => {
  // 获取数据
  OnRefresh();
});

// 下拉刷新
const OnRefresh = () => {
  page.value = 1;
  list.value = [];
  finished.value = false;
  loading.value = true;
  refreshing.value = true;

  setTimeout(OnLoad, 1000);
};

// 上拉加载
const OnLoad = async () => {
  // 如果是下拉刷新，重置其值
  if (refreshing.value === true) {
    refreshing.value = false;
  }
  // 组装参数
  const params = {
    busid: business.value.id,
    page: page.value,
  };
  // 发起请求
  const result = await proxy.$http.post({
    url: "/business/share",
    params,
  });
  // 取消加载
  loading.value = false;
  // 处理请求结果
  if (result.code === 1) {
    // 获取数据总数
    let count = result.data ? result.data.count : 0;
    // 获取数据并且合并数组
    list.value = result.data ? list.value.concat(result.data.list) : [];
    // 判断是否加载完所有数据
    if (list.value.length >= count) {
      // 完成加载
      finished.value = true;
      return;
    }
    // 分页+1
    page.value += 1;
  } else {
    finished.value = true;
  }
};

// 跳转到商品详情页
const ToProduct = (proid) =>
  proxy.$router.push({ path: "/product/info", query: { proid } });

// 图片预览
const preview = (img, index) => {
  showImagePreview({
    images: img, // 图片数组:url
    startPosition: index, // 从第几张图片开始预览
  });
};

// 点赞功能
const like = async (id, busid, index) => {
  // 组装参数
  const params = {
    id,
    busid,
  };
  // 发起请求
  const result = await proxy.$http.post({
    url: "/business/like",
    params,
  });
  // 处理请求结果
  if (result.code === 1) {
    // 点赞成功
    proxy.$success({
      message: result.msg,
      onClose: () => {
        if (result.data) {
          // 点赞
          list.value[index].likes_status = result.data;
          list.value[index].likes_count += 1;
        } else {
          // 取消点赞
          list.value[index].likes_status = result.data;
          list.value[index].likes_count -= 1;
        }
      },
    });
  } else {
    // 点赞失败
    proxy.$fail(result.msg);
  }
};
</script>

<style scoped>
@import url("/assets/css/share.css");
</style>